<template>
  <el-dialog :close-on-click-modal="false" v-model="state.dialogVisible" :title="title" width="70%" >
    <el-upload
        class="upload-demo"
        :auto-upload="false"
        :on-change="uploadChange"  style="text-align: left;"  >
      <el-button type="primary">上传文件</el-button>
    </el-upload>
      <el-form-item>
        <el-button @click='submit'>确认导入</el-button>
      </el-form-item>
    <el-table :data="state.tableData.data" max-height="500px">
      <el-table-column v-for="item in state.colunm" :prop="item.key" :key="item.key" :label="item.lable">
      </el-table-column>
    </el-table>
    <div class='block flex justify-end' v-if='state.tableData.total > 0'>
      <el-pagination v-model:currentPage="state.searchInput.PageIndex" v-model:page-size="state.searchInput.PageSize"
        :page-sizes="[10, 50, 200, 1000]" layout="total, sizes, prev, pager, next, jumper" @size-change="getData"
        @current-change="getData" :total="state.tableData.total" />
    </div>
  </el-dialog>
</template>

<script lang="ts" >
import { defineComponent, reactive, onMounted } from "vue";
import * as XLSX from 'xlsx'
import { readFile } from '../plugins/readFile.js';

export default defineComponent({
  emits: [
    'childClick'
  ],
  props: {
    title: String,
    accept: String
  },
  setup(props, context) {
    const state = reactive({
      tempTableData: [{}],//临时存储全部数据
      searchInput: { PageIndex: 1, PageSize: 10 },
      tableData: { data: [{}], total: 0 },//表格加载当前页面数据
      dialogVisible: false,
      colunm: [{ key: '', lable: '' }]
    });
    onMounted(() => {
      console.log(state.dialogVisible);
    });
    const childMethod = (data) => {
      state.colunm = data;
      state.tableData.data = [];
      state.dialogVisible = true;
    }
    const getData = () => {
      const tempData: any = [];
      state.tempTableData.forEach((value, index) => {
        if (index >= ((state.searchInput.PageIndex - 1) * state.searchInput.PageSize) && index < ((state.searchInput.PageIndex) * state.searchInput.PageSize)) {
          tempData.push(value);
        }
      });
      state.tableData.data = tempData;
      state.tableData.total = state.tempTableData.length;
    }
    const cancel = () => {
      state.dialogVisible = false;
    }
    const submit = () => {
      console.log(state.tempTableData);
      context.emit('childClick', state.tempTableData,state.colunm)
    }
    const uploadChange = async (file) => {
      let dataBinary = await readFile(file.raw)
      let workBook = XLSX.read(dataBinary, { type: 'binary', cellDates: true })
      let workSheet = workBook.Sheets[workBook.SheetNames[0]]
      let data: any = XLSX.utils.sheet_to_json(workSheet)

      let mycolunm={};
      Object.setPrototypeOf(mycolunm,data[0]);
      state.colunm=[];
      for(let key in mycolunm){
        state.colunm.push( { lable: key, key: key })
      }
      
      let tHeader = state.colunm.map(obj => obj.lable)
      let filterVal = state.colunm.map(obj => obj.key)
      tHeader.map(val => filterVal.map(obj => val[obj]))
      const tempData: any = [];
      data.forEach((value) => {
        const ob = {};
        tHeader.forEach((item, index) => {
          ob[filterVal[index]] = value[item].toString();
        })
        tempData.push(ob);
      })
      state.tempTableData = tempData;
      getData();
    }
    return {
      state,
      childMethod,
      cancel,
      submit,
      uploadChange,
      getData
    };
  }
})
</script>
<style scoped>
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>